<template>
  <a-layout-sider
      style="flex: 0 0 415px;min-width: 415px;max-width: 415px;width: 415px;background: #ffffff !important;">
    <div class="left-top">
      <div class="logoa1">
        <img src="../../../assets/images/generalDetection/detection.png"/>
      </div>
      <span>通用监测</span>
      <div class="logoa2">
        <div class="logoa2Img"></div>

        <span style="color: white;font-size: 14px;cursor: pointer;" @click="changePageAdd">添加规则</span>
      </div>
    </div>
    <div class="left-item">
      <span :style="active==1?'color: rgb(23,119,255)':''" @click="changePage(1)">互联网诈骗</span>
      <div style="display: flex;width: 25%;height: 100%;justify-content: space-around;position: absolute;left: 68%"
           :style="active==1?'':'display: none'"
      >
        <div class="search"></div>
        <div class="delete"></div>
        <div class="suspended"></div>
      </div>
    </div>
    <div class="left-item">
      <span  :style="active==2?'color: rgb(23,119,255)':''" @click="changePage(2)">木马病毒</span>
      <div style="display: flex;width: 25%;height: 100%;justify-content: space-around;position: absolute;left: 68%"
            :style="active==2?'':'display: none'"
      >
        <div class="search"></div>
        <div class="delete"></div>
        <div class="suspended"></div>
      </div>
    </div>
    <div class="left-item">
      <span  :style="active==3?'color: rgb(23,119,255)':''" @click="changePage(3)">三大运营商在美退市</span>
      <div style="display: flex;width: 25%;height: 100%;justify-content: space-around;position: absolute;left: 68%"
           :style="active==3?'':'display: none'"
      >
        <div class="search"></div>
        <div class="delete"></div>
        <div class="suspended"></div>
      </div>
    </div>
    <div class="left-item">
      <span  :style="active==4?'color: rgb(23,119,255)':''" @click="changePage(4)">App违法运行事</span>
      <div style="display: flex;width: 25%;height: 100%;justify-content: space-around;position: absolute;left: 68%"
           :style="active==4?'':'display: none'"
      >
        <div class="search"></div>
        <div class="delete"></div>
        <div class="suspended"></div>
      </div>
    </div>
    <div class="left-item">
      <span  :style="active==5?'color: rgb(23,119,255)':''" @click="changePage(5)">激活黑卡70吨</span>
      <div style="display: flex;width: 25%;height: 100%;justify-content: space-around;position: absolute;left: 68%"
           :style="active==5?'':'display: none'"
      >
        <div class="search"></div>
        <div class="delete"></div>
        <div class="suspended"></div>
      </div>
    </div>
    <div class="left-item">
      <span  :style="active==6?'color: rgb(23,119,255)':''" @click="changePage(6)">运营商断卡涉案</span>
      <div style="display: flex;width: 25%;height: 100%;justify-content: space-around;position: absolute;left: 68%"
           :style="active==6?'':'display: none'"
      >
        <div class="search"></div>
        <div class="delete"></div>
        <div class="suspended"></div>
      </div>
    </div>
    <div class="left-item">
      <span  :style="active==7?'color: rgb(23,119,255)':''" @click="changePage(7)">物联网卡诈骗断卡</span>
      <div style="display: flex;width: 25%;height: 100%;justify-content: space-around;position: absolute;left: 68%"
           :style="active==7?'':'display: none'"
      >
        <div class="search"></div>
        <div class="delete"></div>
        <div class="suspended"></div>
      </div>
    </div>
    <div class="left-item">
      <span  :style="active==8?'color: rgb(23,119,255)':''" @click="changePage(8)">新型短信诈骗检测</span>
      <div style="display: flex;width: 25%;height: 100%;justify-content: space-around;position: absolute;left: 68%"
           :style="active==8?'':'display: none'"
      >
        <div class="search"></div>
        <div class="delete"></div>
        <div class="suspended"></div>
      </div>
    </div>
  </a-layout-sider>
</template>

<script>
export default {
  name: "hotindex",
  props:["active"],
  data(){
    return {

    }
  },
  methods:{
    changePageAdd(){
      this.$router.push({
        path:'/generalDetectionAdd',
      })
    },
    changePage(tag){
      let path;
      if (tag==1){
        path = "generalDetection";
      }else if (tag ==2){
        path = "generalDetectionAdd";
      }else if (tag ==3){
        path = "generalDetection";
      }else if (tag ==4){
        path = "generalDetection";
      }else if (tag ==5){
        path = "generalDetection";
      }else if (tag ==6){
        path = "generalDetection";
      }else if (tag ==7){
        path = "generalDetection";
      }else if (tag ==8){
        path = "generalDetectionInfo";
      }


      this.$router.push({
        path: '/'+path,
      })

    },


  }
}
</script>

<style scoped lang="scss">
.left-top {
  height: 60px;
  font-size: 16px;
  display: flex;
  align-items: center;
  background-color: rgb(23, 119, 255);
  width: 100%;

  .logoa1 {
    margin: 0 25px 0 25px;
  }
  .logoa2Img{
    width: 20%;
    height: 20%;
    background: url("../../../assets/images/generalDetection/addChart.png") left center no-repeat;
    display: inline-block;
  }
  .logoa2{
    height: 100%;
    width: 25%;
    margin-left: 38%;

  }

  span {
    line-height: 60px;
    color: #ffffff;
  }
}

.left-item {
  height: 60px;
  font-size: 14px;
  display: flex;
  margin-left: 65px;
  align-items: center;
  span{
    cursor: pointer;
  }
  .suspended{
    background: url("../../../assets/images/generalDetection/suspended.png") left center no-repeat;
    width: 20%;
    height: 100%;
    cursor: pointer;
  }
  .delete{
    background: url("../../../assets/images/generalDetection/delete.png") left center no-repeat;
    width: 20%;
    height: 100%;
    cursor: pointer;
  }
  .search{
    background: url("../../../assets/images/generalDetection/1.png") left center no-repeat;
    width: 20%;
    height: 100%;
    cursor: pointer;
  }
}


</style>
